<template>
  <div>
    <div class="homepage">
      <div class="list">
        <van-tabs @change="Change">
          <van-tab
            v-for="item in lists"
            :title="item.title"
            :key="item.id"
            :id="item"
          >
          </van-tab>
        </van-tabs>
      </div>
      <div class="sss"></div>
      <!--  -->
      <div class="log">
        <div class="logleft iconfont icon-liebiao"></div>
        <div class="logrigth iconfont icon-pinglun"></div>
      </div>
      <!-- 内容 -->
      <div class="content" v-if="refresh">
        <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
        >
          <!-- 入场必看 -->
          <div class="mustSee" v-show="id == 0">
            <p></p>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newmustSee"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 关注 -->
          <div class="attention" v-show="id == 1">
            <img src="../assets/67.png" alt="" />
          </div>
          <!-- 推荐 -->
          <div class="recommend" v-show="id == 2">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="onecarousel">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newonecarousel"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item.model.cover + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul class="newrecomend">
              <router-link
                class="lis"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newonerecommend"
                :key="item.id"
              >
                <div class="img">
                  <img :src="item.cover" alt="" />
                </div>
                <!-- 观看数 -->
                <div class="watchnum">
                  <div id="left">
                    <span class="iconfont icon-xiaoyanjing">
                      {{
                        item.author.userinfo.count.count_article_viewed
                          | playCountNum
                      }}</span
                    >
                    <span class="iconfont icon-dianzan">
                      {{
                        item.author.userinfo.count.count_liked | playCountNum
                      }}</span
                    >
                  </div>
                  <div id="rigth">
                    {{ item.author.userinfo.count.count_article | article }}
                  </div>
                </div>
                <p>{{ item.title }}</p>
                <div class="buttom">
                  <span>{{ item.author.userinfo.username }}</span>
                  <div class="iconfont icon-gengduo-shuxiang"></div>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 每日精选 -->
          <div class="dailybest" v-show="id == 3">
            <p class="p">今日精选</p>
            <ul v-if="newhomepage">
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newhomepage"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img :src="item.author.userinfo.avatar" alt="" />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 热门 -->
          <div class="gethotFun" v-show="id == 4">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="hotbanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newgethotcarousel"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--  -->
            <div class="hotcomposer">
              <ul class="uls">
                <li
                  class="lis"
                  v-for="item in newMonthlycarousel"
                  :key="item.id"
                >
                  <div class="imgnew">
                    <img :src="item.icon" alt="" />
                  </div>
                  <div class="newp">{{ item.title }}</div>
                </li>
              </ul>
            </div>
            <!--  -->
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newgethotcarousellist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 剧情短片 -->
          <div class="getchannelplot" v-show="id == 5">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="plotbanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newchannelplotcarousel"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in channelplotlist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 创意 -->
          <div class="creativity" v-show="id == 6">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="creativitybanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newcreativitycarousel"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newcreativitylist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 特殊摄影 -->
          <div class="photography" v-show="id == 7">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="photographybanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newgetphotographyusel"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newgetphotographylist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 旅拍 -->
          <div class="shooting" v-show="id == 8">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="shootingbanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newshooting"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newgetshootinglist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 干货教程 -->
          <div class="course" v-show="id == 9">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="coursebanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newgetcourse"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newggetcourselist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 混剪 -->
          <div class="montage" v-show="id == 10">
            <p></p>
            <!-- Swiper轮播图 -->
            <div class="montagebanner">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide item"
                    v-for="item in newgetmontage"
                    :key="item.id"
                  >
                    <div class="img">
                      <img :src="item + '?param=140y140'" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newgetmontagelist"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img
                      :src="item.author.userinfo.avatar + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 器材党 -->
          <div class="equipment" v-show="id == 11">
            <p></p>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newequipment"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img :src="item.author.userinfo.avatar" alt="" />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 动画 -->
          <div class="animation" v-show="id == 12">
            <p></p>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newanimation"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img :src="item.author.userinfo.avatar" alt="" />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- Vlog -->
          <div class="Vlog" v-show="id == 13">
            <p></p>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newgetVlog"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img :src="item.author.userinfo.avatar" alt="" />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
          <!-- 古风 -->
          <div class="antiquities" v-show="id == 14">
            <p></p>
            <ul>
              <router-link
                tag="li"
                :to="'/VideoDisplay?id=' + item.id"
                v-for="item in newgetantiquities"
                :key="item.id"
              >
                <div class="top">
                  <div class="img">
                    <img :src="item.author.userinfo.avatar" alt="" />
                  </div>
                  <div class="rigth">
                    <div class="name">{{ item.author.userinfo.username }}</div>
                    <div class="attention">
                      <span>+关注</span>
                      <div class="more iconfont icon-gengduo-shuxiang"></div>
                    </div>
                  </div>
                </div>
                <p class="title">{{ item.title }}</p>
                <div class="player">
                  <div class="img">
                    <img
                      :src="item.share_info.image + '?param=140y140'"
                      alt=""
                    />
                  </div>
                  <div class="count_view">
                    {{ item.count.count_view | playCountNum }} 观看 |
                    {{ item.duration | article }}
                  </div>
                </div>
                <div class="base">
                  <span class="iconfont icon-shoucang">{{
                    item.count.count_collect
                  }}</span>
                  <span class="iconfont icon-pinglun">{{
                    item.count.count_comment
                  }}</span>
                  <span class="iconfont icon-dianzan">{{
                    item.count.count_like
                  }}</span>
                </div>
              </router-link>
            </ul>
          </div>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { Toast } from "vant";
import {
  getconfig,
  getselection,
  getmustSee, //入场必看
  getrecommend, //推荐
  gethot, //热门
  getchannelplot, //剧情短片
  getchannelcreative, //创意
  getphotography, //特殊摄影
  getshootingtour, //旅拍
  getcourse, //干货教程
  getmontage, //混剪
  getequipment, //器材党
  getanimation, //动画
  getVlog, //Vlog
  getantiquities, //古风
} from "../api/home";

export default {
  data() {
    return {
      refresh: true, //刷新
      count: 0,
      isLoading: false,
      lists: "",
      indexs: "",
      homepage: "",
      newhomepage: [],
      id: "",
      channelplotcarousel: "", //剧情短片轮播图
      newchannelplotcarousel: [],
      current: 0,
      getchannelplotlist: "",
      channelplotlist: [], //剧情短片列表
      //创意
      creativitycarousel: "",
      newcreativitycarousel: [],
      creativitylist: "",
      newcreativitylist: [],
      //特殊摄影
      getphotographyusel: "",
      newgetphotographyusel: [],
      getphotographylist: "",
      newgetphotographylist: [],
      //旅拍
      getshooting: "",
      newshooting: [],
      getshootinglist: "",
      newgetshootinglist: [],
      //干货教程
      getcourse: "",
      newgetcourse: [],
      getcourselist: "",
      newggetcourselist: [],
      //混剪
      getmontage: "",
      newgetmontage: [],
      getmontagelist: "",
      newgetmontagelist: [],
      //器材党
      equipment: "",
      newequipment: [],
      //动画
      animation: "",
      newanimation: [],
      //Vlog
      getVlog: "",
      newgetVlog: [],
      //古风
      getantiquities: "",
      newgetantiquities: [],
      //入场必看
      mustSee: "",
      newmustSee: [],
      //推荐
      onecarousel: "",
      newonecarousel: [],
      onerecommend: "",
      newonerecommend: [],
      //热门
      gethotcarousel: "",
      newgethotcarousel: [],
      Monthlycarousel: "",
      newMonthlycarousel: [],
      gethotcarousellist: "",
      newgethotcarousellist: [],
    };
  },

  //方法
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    change(e) {
      console.log("aa");
      console.log(e);
    },
    getconfigFun() {
      getconfig().then((data) => {
        // console.log(data, "首页数据");
        this.lists = data.data.tab;
      });
    },
    //入场必看
    getmustSeeFun() {
      getmustSee().then((data) => {
        // console.log(data, "入场必看");
        this.mustSee = data.data.children.splice(1);
        this.mustSee.forEach((item) => {
          this.newmustSee.push(item.children[0].model.resource);
        });
      });
    },
    //推荐
    getrecommendFun() {
      getrecommend().then((data) => {
        // console.log(data, "大推荐");
        // 第一个轮播图
        this.onecarousel = data.data.children.splice(0, 1);
        // console.log(this.onecarousel, "推荐");
        this.onecarousel[0].children.forEach((item) => {
          this.newonecarousel.push(item);
        });
        //小图标
        this.onerecommend = data.data.children.splice(1, 6);
        this.onerecommend.forEach((item) => {
          this.newonerecommend.push(item.children[0].model.resource);
        });
      });
    },
    //热门
    gethotFun() {
      gethot().then((data) => {
        // console.log(data, "热门");
        // 轮播图
        this.gethotcarousel = data.data.children.splice(0, 1);
        this.gethotcarousel[0].children.forEach((item) => {
          this.newgethotcarousel.push(item.model.cover);
        });
        // // 榜单
        this.Monthlycarousel = data.data.children.splice(0, 1);
        this.Monthlycarousel[0].children.forEach((item) => {
          this.newMonthlycarousel.push(item.model);
        });
        console.log(this.newMonthlycarousel, "榜单");
        // //列表
        this.gethotcarousellist = data.data.children.splice(2);
        this.gethotcarousellist.forEach((item) => {
          this.newgethotcarousellist.push(item.children[0].model.resource);
        });
      });
    },

    //每日精选
    getselectionFun() {
      getselection().then((data) => {
        this.homepage = data.data.children.splice(1);
        // console.log(this.homepage, "每日精选");
        this.homepage.forEach((item) => {
          // console.log(item.children[0].model.resource, "每日精选");
          this.newhomepage.push(item.children[0].model.resource);
        });
        console.log(this.newhomepage, "new");
      });
    },
    //剧情短片
    getchannelplotFun() {
      getchannelplot().then((data) => {
        console.log(data, "剧情短片");
        // 轮播图
        this.channelplotcarousel = data.data.children.splice(0, 1);
        this.channelplotcarousel[0].children.forEach((item) => {
          this.newchannelplotcarousel.push(item.model.cover);
        });
        //列表
        this.getchannelplotlist = data.data.children.splice(1);
        this.getchannelplotlist.forEach((item) => {
          this.channelplotlist.push(item.children[0].model.resource);
        });
      });
    },
    //创意
    getchannelcreativeFun() {
      getchannelcreative().then((data) => {
        // console.log(data, "创意");
        // 轮播图
        this.creativitycarousel = data.data.children.splice(0, 1);
        this.creativitycarousel[0].children.forEach((item) => {
          this.newcreativitycarousel.push(item.model.cover);
        });
        //列表
        this.creativitylist = data.data.children.splice(1);
        this.creativitylist.forEach((item) => {
          this.newcreativitylist.push(item.children[0].model.resource);
        });
      });
    },
    //特殊摄影
    getphotographyFun() {
      getphotography().then((data) => {
        // console.log(data, "特殊摄影");
        // 轮播图
        this.getphotographyusel = data.data.children.splice(0, 1);
        this.getphotographyusel[0].children.forEach((item) => {
          this.newgetphotographyusel.push(item.model.cover);
        });
        //列表
        this.getphotographylist = data.data.children.splice(1);
        this.getphotographylist.forEach((item) => {
          this.newgetphotographylist.push(item.children[0].model.resource);
        });
      });
    },
    //旅拍
    getshootingtourFun() {
      getshootingtour().then((data) => {
        // console.log(data, "旅拍");
        // 轮播图
        this.getshooting = data.data.children.splice(0, 1);
        this.getshooting[0].children.forEach((item) => {
          this.newshooting.push(item.model.cover);
        });
        //列表
        this.getshootinglist = data.data.children.splice(1);
        this.getshootinglist.forEach((item) => {
          this.newgetshootinglist.push(item.children[0].model.resource);
        });
      });
    },
    //干货教程
    getcourseFun() {
      getcourse().then((data) => {
        // console.log(data, "干货教程");
        // 轮播图
        this.getcourse = data.data.children.splice(0, 1);
        this.getcourse[0].children.forEach((item) => {
          this.newgetcourse.push(item.model.cover);
        });
        //列表
        this.getcourselist = data.data.children.splice(1);
        this.getcourselist.forEach((item) => {
          this.newggetcourselist.push(item.children[0].model.resource);
        });
      });
    },
    //混剪
    getmontageFun() {
      getmontage().then((data) => {
        // console.log(data, "混剪");
        // 轮播图
        this.getmontage = data.data.children.splice(0, 1);
        this.getmontage[0].children.forEach((item) => {
          this.newgetmontage.push(item.model.cover);
        });
        //列表
        this.getmontagelist = data.data.children.splice(1);
        this.getmontagelist.forEach((item) => {
          this.newgetmontagelist.push(item.children[0].model.resource);
        });
      });
    },
    //器材党
    getequipmentFun() {
      getequipment().then((data) => {
        // console.log(data, "器材党");
        this.equipment = data.data.children.splice(1);
        this.equipment.forEach((item) => {
          this.newequipment.push(item.children[0].model.resource);
        });
      });
    },
    //动画
    getanimationFun() {
      getanimation().then((data) => {
        // console.log(data, "动画");
        this.animation = data.data.children.splice(1);
        this.animation.forEach((item) => {
          this.newanimation.push(item.children[0].model.resource);
        });
      });
    },
    //Vlog
    getVlogFun() {
      getVlog().then((data) => {
        // console.log(data, "Vlog");
        this.getVlog = data.data.children.splice(1);
        this.getVlog.forEach((item) => {
          this.newgetVlog.push(item.children[0].model.resource);
        });
      });
    },
    //古风
    getantiquitiesFun() {
      getantiquities().then((data) => {
        // console.log(data, "Vlog");
        this.getantiquities = data.data.children.splice(1);
        this.getantiquities.forEach((item) => {
          this.newgetantiquities.push(item.children[0].model.resource);
        });
      });
    },
    //状态栏切换
    Change(name) {
      console.log(name, "id");
      this.id = name;
    },
    //刷新
    previous() {
      //移除组件
      // this.refresh = false;
      //移除组件后，重新渲染
      //this.$nextTick可实现在DOM 状态更新后，执行传入的方法
      // this.$nextTick(() => {
      // this.refresh = true;
      // });
      this.$router.go(0);
    },
  },
  //生命周期钩子DOM挂载之后
  mounted() {
    // new Swiper(".guidePage", {
    //   pagination: {
    //     el: ".guidePage-pagination",
    //   },
    // });
    this.getmustSeeFun(); //入场必看
    this.getrecommendFun(); //推荐
    this.gethotFun(); //热门
    this.getconfigFun(); //首页数据
    this.getselectionFun(); //每日精选
    this.getchannelplotFun(); // 剧情短片
    this.getchannelcreativeFun(); //创意
    this.getphotographyFun(); //特殊摄影
    this.getshootingtourFun(); //旅拍
    this.getcourseFun(); //干货教程
    this.getmontageFun(); //混剪
    this.getequipmentFun(); //器材党
    this.getanimationFun(); //动画
    this.getVlogFun(); //Vlog
    this.getantiquitiesFun(); //古风
    new Swiper(".swiper-container", {
      paginationClickable: true,
      spaceBetween: 0,
      centeredSlides: true,
      autoplay: 2500,
      autoplayDisableOnInteraction: true,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swipe
    });
  },
  //侦听器
  watch: {
    count: function () {
      console.log("刷新了");
      this.previous();
    },
  },
  //过滤器
  filters: {
    playCountNum(value) {
      //123 0000
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + " 亿" : parseInt(w) + "w"; //亿计算
      return y;
    },
    article(value) {
      // 100秒
      let m =
        value >= 60
          ? Math.floor(value / 60) +
            "'" +
            (Math.floor(value % 60) < 10
              ? "0" + Math.floor(value % 60)
              : Math.floor(value % 60))
          : "00'" + Math.floor(value) + '"'; //总秒数

      return m;
    },
  },
};
</script>

<style lang="less" >
.homepage {
  width: 100%;
  .list {
    width: 100%;
    height: 45px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 199;
  }
  .sss {
    margin-top: 2px;
    width: 100%;
    height: 2px;
    background-color: #eeeeee;
  }
  .log {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 68px;
    height: 44px;
    line-height: 45px;
    display: flex;
    background-color: #fff;
    z-index: 200;
    .iconfont {
      margin: 0px 5px;
      font-size: 20px;
    }
  }
  .swiper-container {
    height: 100%;
    .pageslide {
      width: 100%;
      height: 100%;
      text-align: center;
      img {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        margin-top: 200px;
      }
      h3 {
        color: #595959;
      }
    }
  }
  .content {
    width: 100%;
    .attention {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .recommend,
    .mustSee,
    .dailybest,
    .gethotFun,
    .getchannelplot,
    .creativity,
    .photography,
    .shooting,
    .course,
    .montage,
    .equipment,
    .animation,
    .Vlog,
    .antiquities {
      background-color: #f7f7f7;
      width: 100%;
      .p {
        height: 37px;
        margin-top: 42px;
        line-height: 37px;
        margin-left: 12px;
        padding-top: 12px;
        font-size: 19px;
        color: #000000;
      }
      p {
        height: 1px;
        margin-top: 42px;
        line-height: 37px;
        margin-left: 12px;
        padding-top: 12px;
        font-size: 19px;
        color: #000000;
      }
      i {
        height: 1px;
        display: inline-block;
        // margin-top: 45px;
        padding-top: 45px;
      }
      //轮播图
      .plotbanner,
      .hotbanner,
      .creativitybanner,
      .photographybanner,
      .shootingbanner,
      .coursebanner,
      .montagebanner,
      .onecarousel {
        width: 93%;
        text-align: center;
        margin: 0px auto;
        padding: 5px 0px 10px 0px;
        .item {
          width: 100%;
          height: 190px;
          border-radius: 8px;
          overflow: hidden;
          img {
            width: 100%;
            .img {
              width: 100%;
            }
          }
        }
      }
      .hotcomposer {
        width: 100%;
        .uls {
          display: flex;
          justify-content: space-around;
          width: 100%;
          margin-top: 15px;
          margin-bottom: 15px;
          .lis {
            width: 48px;
            display: flex;
            flex-direction: column;
            background-color: #f7f7f7;
            .imgnew {
              width: 45px;
              height: 45px;
              box-shadow: 0px 1px 2px 1px #d3d0d0;
              border-radius: 50%;
              img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
              }
            }
            .newp {
              font-size: 12px;
              margin-top: 15px;
              text-align: center;
            }
          }
        }
      }
      .newrecomend {
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 0px auto;
        .lis {
          width: 48%;
          position: relative;
          margin-bottom: 12px;
          .img {
            width: 100%;
            height: 94px;
            background-color: #595959;
            border-radius: 5px 5px 0px 0px;
            overflow: hidden;
            img {
              width: 100%;
              border-radius: 5px 5px 0px 0px;
            }
          }
          .watchnum {
            position: absolute;
            top: 75px;
            left: 0px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            #left {
              display: flex;
              .iconfont {
                font-size: 12px;
                color: #fff;
                margin-left: 7px;
                transform: scale(0.9);
              }
            }
            #rigth {
              font-size: 12px;
              color: #fff;
              margin-right: 12px;
              margin-top: 2px;
              // transform: scale(0.9);
            }
          }
          p {
            height: 35px;
            line-height: 18px;
            font-size: 13px;
            margin-left: 12px;
            margin-top: 12px;
            margin-bottom: 0px;
            margin-right: 12px;
            padding-top: 0px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .buttom {
            width: 100%;
            height: 14px;
            line-height: 14px;
            margin-left: 12px;
            display: flex;
            justify-content: space-between;
            padding: 10px 0px 10px 0px;
            span {
              font-size: 12px;
              color: #acacac;
            }
            .iconfont {
              font-size: 16px;
              margin-right: 20px;
            }
          }
        }
      }
      ul {
        width: 100%;
        li {
          width: 94%;
          background-color: #ffffff;
          margin: 0px auto 7px;
          border-radius: 5px;
          .top {
            display: flex;
            height: 32px;
            .img {
              width: 32px;
              height: 32px;
              margin: 12px 6px 12px 12px;
              img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
              }
            }
            .rigth {
              display: flex;
              justify-content: space-between;
              flex: 1;
              height: 54px;
              .name {
                width: 100%;
                font-size: 12px;
                color: #2d2d2d;
                height: 54px;
                line-height: 54px;
              }
              .attention {
                height: 54px;
                line-height: 54px;
                display: flex;
                justify-content: flex-end;
                span {
                  color: #ce371c;
                  font-size: 12px;
                }
                .more {
                  font-size: 16px;
                  margin: 0px 10px;
                }
              }
            }
          }
          .title {
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            color: #232323;
            margin: 10px 0px 10px 12px;
            display: -webkit-box; /*将对象转为弹性盒模型展示*/
            -webkit-box-orient: vertical; /*设置弹性盒模型子元素的排列方式*/
            -webkit-line-clamp: 1; /*限制文本行数*/
            overflow: hidden; /*超出隐藏*/
          }
          .player {
            width: 100%;
            height: 200px;
            background-color: #595959;
            position: relative;
            .img {
              width: 100%;
              height: 200px;
              overflow: hidden;
              img {
                width: 100%;
                height: 200px;
              }
            }
            .count_view {
              position: absolute;
              bottom: 6px;
              right: 0px;
              color: #eeeeee;
              font-size: 13px;
              margin-right: 12px;
            }
          }
          .base {
            width: 100%;
            height: 37px;
            line-height: 37px;
            display: flex;
            justify-content: space-around;
            span {
              margin-right: 7px;
              font-size: 15px;
            }
          }
        }
      }
    }
    .getchannelplot {
      width: 100%;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
      //轮播图
      // .plotbanner,
      // .creativitybanner {
      //   width: 90%;
      //   text-align: center;
      //   margin: 10px auto;
      //   // margin-top: 10px;
      //   .item {
      //     width: 100%;
      //     height: 190px;
      //     border-radius: 8px;
      //     overflow: hidden;
      //     img {
      //       width: 100%;
      //       .img {
      //         width: 100%;
      //       }
      //     }
      //   }
      // }
    }
  }
}
</style>